<template>
<div class="tabDiv">
  <index-login v-if="isNeedLogin" @complete="logins"></index-login>
  <!-- 活动规则 -->
  <!-- <div class="rule_all" v-if="isShowRuleData" @click="closeRuleData">
    <div class="rule_all_content">
      <image class="rule_all_content_bgicon" src="https://static.daoyintech.com/rulebg.png" mode=""></image>
      <div class="rule_all_content_info">
        <scroll-view scroll-y="true" class="rule_all_content_info_scroll">
          <div class="scroll_">
            <div class="rule_one" v-for="(item,index) of ruleData" :key="index">
              <div class="rule_one_index"><div class="rule_one_index_">{{index + 1}}</div></div>
              <div class="rule_one_word">{{item}}</div>
            </div>
          </div>
        </scroll-view>
      </div>
    </div>
  </div> -->

  <!-- 新活动弹窗 -->
  <div class="share_all_tc" v-if="isShowRuleData" @click="closeRuleData">
    <div class="share_all_tc_content">
      <image class="share_tc_icon" src="https://static.daoyintech.com/tanchuang.png" mode=""></image>
      <button style="padding:0" v-if="isloginShareBtn" class="share_btn" id="shareBtn" open-type="share" >立即邀请</button>
      <div v-if="!isloginShareBtn" style="text-align: center;" class="share_btn" @click.stop="shareLogin">立即邀请</div>
    </div>
  </div>

  <!-- 海报 -->
  <div class="hb" v-if="showhb" @click="close">
    <image class="hb_icon" :src="hbIcon" mode="aspectFit"></image>
    <div class="hb_btn" @click.stop="saveImage">保存海报</div>
  </div>
  
  <!-- <index-login @complete="complete" v-if="ifLogin"></index-login> -->
  <!-- <div class="integralBtn" @click="toLink('/pages/integral-record/main')">
    <div class="rewardpoolDiv">
      <img src="/static/images/user/rewardpool.png">
    </div>
    <p>奖池</p>
  </div> -->
  <div class="integralBtn imgwall" @click="toLink('/pages/img-wall/main')" v-if="false">
    <div class="rewardpoolDiv">
      <img src="/static/images/user/imgwall.png">
    </div>
    <p>照片墙</p>
  </div>
  <div class="tabAll"> 
      <div class="tabContent">
        <div class="myTabUl" >
          <tab-item :items="tablist" :selectIds = "selectId" @clickId="clickId"></tab-item> 
        </div>
      </div>
      <div class="searchDiv" @click="toLink('../search/main')" v-if="isShowIntro">搜索</div>
  </div>


 
  <div class="imglist" >
    <!-- 地灵运动首页 -->
    <div class="motion_box">
      <!-- 搜索栏 -->
      <div class="search">
        <div @click="isShowcity()" class="city">{{city}} 
          <img style="width:24rpx;height:24rpx;margin-left: 5rpx;" src="../../../static/images/index/reback.png" alt="">
        </div>
        <div class="button">
          <img style="width:36rpx;height:36rpx;margin-right: 12rpx;" src="../../../static/images/index/search.png" alt="">
          <input placeholder="搜索场馆">
          <!-- <input class='weui-input' placeholder='密码' placeholder-class="phcolor" bindinput="updateValue" data-name='pwd' value='{{pwd}}'></input> -->
        </div>
        <div class="img_box"  @click="go_mapDetails(item)">
        </div>
      </div>
      <!-- banner标题 -->
      <div class="banner_box">
          <div class="banner_box_child" v-for="(item,index) in bannerList" :key="index">
            <image @click="go_mapinfo(item)" style="width: 100rpx;height: 100rpx;" :src="img_url + '/' + item.iconKey"></image>
            <div class="banner_box_text">{{item.name}}</div>
          </div>
      </div>
      <!-- 筛选条件 -->
      <div class="search_box">
        <div @click="isShow = !isShow">
            全部类别 
          <img style="width:20rpx;height:20rpx; margin-right: 31rpx;" src="../../../static/images/index/open.png" alt="">
        </div>
        <div @click="isShowKm = !isShowKm">
            附近
          <img style="width:20rpx;height:20rpx; margin-right: 31rpx;" src="../../../static/images/index/open.png" alt="">
        </div>
        <div  @click="isShowZN = !isShowZN">
            智能排序
            <img style="width:20rpx;height:20rpx; margin-right: 31rpx;" src="../../../static/images/index/open.png" alt="">
        </div>
        <div  @click="isShowSx = !isShowSx">
            筛选
            <img style="width:20rpx;height:20rpx; margin-right: 31rpx;" src="../../../static/images/index/open.png" alt="">
        </div>
      </div>
      <!-- 全部数据弹出层 -->
      <div class="modle">
          <div class="allCategory" v-if="isShow">
            <div @click="sendInfo(item.id)" class="allCategoryInfo" v-for="item in bannerList" :key="item">{{item.name}}</div>
          </div>
      </div>
      <!-- 附近弹出层 -->
      <div class="modle">
          <div class="allCategory" v-if="isShowKm">
            <div @click="sendNearby(item.type)" class="allCategoryInfo" v-for="item in distanceTypeList" :key="item">{{item.name}}</div>
          </div>
      </div>
      <!-- 智能排序 -->
      <div class="modle">
          <div class="allCategory" v-if="isShowZN">
            <div @click="sendIntellectType(item.type)" class="allCategoryInfo" v-for="item in intellectTypeList" :key="item">{{item.name}}</div>
          </div>
      </div>
      <!-- 附近弹出层 -->
      <div class="modle">
          <div class="allCategory" v-if="isShowSx">
            <div @click="sendListinfo(item.type)" class="allCategoryInfo" v-for="item in List" :key="item">{{item.name}}</div>
          </div>
      </div>
      <!-- 瀑布流内容 -->
      <div class="waterfall_box">
        <div class="nullArr" v-if="arrLeft.length == 0 && arrRight.length == 0">
           亲，暂无此数据....
        </div>
        <div  style="width: 350rpx;height:100%;margin-right: 16rpx;">
            <div class="left" v-for="(item,index) in arrLeft" :key="index">
              <image style="width:350rpx;border-radius: 15rpx 15rpx 0 0;" :src="item.indexIcon" mode="widthFix"></image>
            <div>{{item.name}}</div>
            <div class="text1">
              <img style="width:22rpx;height:22rpx;" src="../../../static/images/index/dz.png" alt="">
              <span class="overhed">{{item.address}}</span>
            </div>
            <div class="text2">
              <span>{{isAppointment == true ? '可预约':"不可预约" }}</span>
              <span class="c908">{{item.distance/1000}}km</span>
            </div>
            <div class="text3">
              ￥{{item.showPrice}}<span>元/小时起</span>
            </div>
          </div>
        </div>

        <div  style="width: 350rpx;height:100%;">
            <div class="right" v-for="(item,index) in arrRight" :key="index">
              <image style="width:350rpx;border-radius: 15rpx 15rpx 0 0;" :src="item.indexIcon" mode="widthFix"  @click="go_mapDetails(item)"></image>
            <div>{{item.name}}</div>
            <div class="text1">
              <img style="height:22rpx;width:22rpx;" src="../../../static/images/index/dz.png" alt="">
              <span class="overhed">{{item.address}}</span>
            </div>
            <div class="text2">
              <span>{{isAppointment == true ? '可预约':"不可预约" }}</span>
              <span class="c908">{{item.distance/1000}}km</span>
            </div>
            <div class="text3">
              ￥{{item.showPrice}}<span>元/小时起</span>
            </div>
          </div>
        </div>


      </div>
    </div>

    <div class="imgIntro" v-if="bannerImglist.length>0 && selectId == 0">
      <!-- <swiper  duration="1000" interval="6000" circular="circular"  autoplay="true" @change="aaa($event,bannerImglist)">
          <block v-for="(item, index) in bannerImglist" :key="index">
            <swiper-item  v-if="item.isVideo == false" catchtouchmove='catchTouchMove'> 
              <image  :src="item.url"   class="slide-image" @click="bannerImgTO(item.link)" />
            </swiper-item>
            <swiper-item v-if="item.isVideo == true" > 
              <video style="width:100%;height:100%" :id="index" :src="item.url" class="slide-video"></video>
            </swiper-item>
          </block>
      </swiper> -->
      <!-- <div class="turn" v-if="musicStatus" @click="stopMusic()">
        <img class="music_icon" src="https://static.daoyintech.com/music_icon.png" alt="">
      </div>
      <div class="stop_turn" v-if="!musicStatus" @click="startMusic()">
        <img class="music_icon" src="https://static.daoyintech.com/music_icon.png" alt="">
      </div> -->
      <div class="share_icon" @click="closeRuleData">
        <img class="music_icon" src="https://static.daoyintech.com/sharetip.png" alt="">
      </div>
      <view class="marquee">
        <view class="content">
          <block  v-for="(item, index) in bannerImglist" :key="index">
            <image  class="marquee_content_one_icon" :src="item.url"  @click="bannerImgTO(item.link)" />
          </block>
          <block  v-for="(item, index) in bannerImglist" :key="index">
            <image  class="marquee_content_one_icon" :src="item.url"  @click="bannerImgTO(item.link)" />
          </block>
        </view>
      </view>
      <div class="shop_paper">
        <div class="shop_paper_one" v-for="(item,index) of shopPaper" :key="index" @click="go_shoppaper(item.id)">
          <img class="shop_paper_one_icon" :src="item.icon" alt="">
          <div class="shop_paper_one_name">{{item.name}}</div>
        </div>
      </div>
    </div>
    <div class="imgIntro" v-if="bannerImglist1.length>0 && selectId != 0">
      <swiper  duration="1000" interval="6000"  circular="circular" indicator-dots="true" @change="aaa($event,bannerImglist1)"  >
          <block v-for="(item, index) in bannerImglist1" :key="index">
            <swiper-item  v-if="item.isVideo == false"> 
              <image  :src="item.url"  class="slide-image" @click="bannerImgTO(item.link)" />
            </swiper-item>
            <swiper-item v-if="item.isVideo == true"> 
              <video initial-time='0.01' style="width:100%;height:100%" :id="index" :src="item.url" class="slide-video"></video>
            </swiper-item>
          </block>
      </swiper>
    </div>
    <div class="imgIntro" v-if="activeImglist.length>0">
      <goods-active-img :goodsActiveItem="activeImglist"></goods-active-img>
    </div>
    <div class="seprateShop" v-if="isShowShopIntro">
      <p></p>
      <div>商品推荐</div>
    </div>
    <goods-item :goddsItem="comgoodslist" v-if="comgoodslist && comgoodslist.length>0"></goods-item>
    <goods-item :goddsItem="comgoodslistother"  v-if="comgoodslistother && comgoodslistother.length>0"></goods-item> 
  </div>

  <div class="lackShopPage" v-if="isLoading && comgoodslist.length === 0 && comgoodslistother.length === 0" >
    <div class="lackShopTxt">
      <div><img src="/static/images/lack/lackSearch.png"></div>
      <p>暂无相关商品~</p>
    </div>
  </div>
  
  <div v-if="isBottom1" class="bottomDiv"><img src="/static/images/goods/loading2.png">别拉了，到底啦~</div>
  <div v-if="isBottom2" class="bottomDiv"><img src="/static/images/goods/loading2.png">别拉了，到底啦~</div>

</div>
</template>

<script>
  // import indexLogin from '@/components/dialog/index-login' 
  import TabItem from '@/components/index/tab-item'
  import GoodsItem from '@/components/index/goods-item'
  import GoodsActiveImg from '@/components/index/goods-active-img' 
  import updateIntegral from '@/components/index/update-integral' 
  import {mapGetters} from 'vuex'
  import indexLogin from '@/components/dialog/index-login' 
 
  export default {
    components: {
      TabItem,GoodsItem,GoodsActiveImg,updateIntegral,indexLogin
    },
    data () {
      return {
          tablist: [],  //首页的tab切换
          bannerImglist: [],  //首页的banner图片
          bannerImglist1: [],  //非首页的banner图片
          activeImglist: [], //首页的活动图片
          goodslist: [],  //首页的详情商品
          goodslistother: [],  //首页其它的的详情商品
          ifLogin: true, //是否需要登录 true是需要登录授权的
          isShowIntro: false,//是否显tab栏
          isShowShopIntro: false, //是否显示商品推荐
          selectId: 0,//选择的是哪一个tab
          page: 1, //当前页数
          totalPage: null,//总页面
          isBottom1: false,//判断是否到底了
          isBottom2: false,//判断是否到底了
          userCode: '',//用户的二维码
          isLoading: false, //显示缺省页  true是显示
          shopPaper:[
            {name:"附近商家",icon:"https://static.music.daoyintech.com/nearShop.png",id:0},
            {name:"分享海报",icon:"https://static.music.daoyintech.com/papers.png",id:1}
          ],
          bannerList:[], // banner标题数组
          img_url:'http://static.daoyintech.com',// 图片地址
          isNeedLogin: false,//是否显示登录的组件

          hbIcon:'',
          showhb:false,

          ruleData:'',//活动规则
          isShowRuleData:true,

          backgroundAudioManager: null,
          musicStatus:true,
          musicUrl:null,


          isloginShareBtn:false,//根据用户登录状态显示不同得分享按钮，false--需要先进行登录，true--直接分享
          userId:null,//用户id

          waterfall_data:[
            {
              imgurl:'https://static.music.daoyintech.com/nearShop.png',
              name:'XXX羽毛球馆',
              position:'四川省成都市盛安街125号',
              istype:'可预约',
              distance:'0.2km',
              price:'￥25.5'
            }
          ],// 瀑布liu数组
          latitude:0, // 纬度
          longitude:0, // 经度
          city:'成都市',// 选择城市
          areaShopsInfoList:[], // 瀑布流数据
          arrLeft:[],
          arrRight:[],
          allCategoryList:[
            {name:'篮球',id:0},
            {name:'羽毛球',id:1},
            {name:'游泳',id:2},
            {name:'足球',id:3},
            {name:'射箭',id:4},
            {name:'乒乓球',id:5},
            {name:'网球',id:6},
            {name:'攀岩',id:7}
          ],//全部列别数组
          distanceTypeList:[
            {name:'1km以内',type:1},
            {name:'3km以内',type:2},
            {name:'5km以内',type:3},
            {name:'10km以内',type:4},
          ],//附近数组
          intellectTypeList:[
            {name:'离我最近',type:1},
            {name:'价格最低',type:2},
            {name:'价格最高',type:3},
          ],//智能排序数组
          List:[
            {name:'0-100',type:1},
            {name:'100-300',type:2},
            {name:'300-500',type:3},
            {name:'500以上',type:4}
          ],//筛选数据
          isShowKm:false,//附近下拉数据
          isShow:false,// 全部分类下拉数据
          isShowZN:false,// 全部分类下拉数据
          isShowSx:false,// 筛选分类下拉数据
          typeId:null,// 分类查询id
          shopName:'',//商品名称
          distanceType:'',//附近
          intellectType:'',// 智能排序
          lowPrice:1,//最低价格
          highPrice:2,// 最高价格
      }
    }, 

    onShareAppMessage(res){//分享给朋友
      if (res.from === 'button') {
        console.log(this.userId)
        return {
          title: '我获得了现金优惠券，你也快来领取吧！',
          path: `/pages/index/main?unionId=` + this.userId,
          imageUrl: "https://static.daoyintech.com/astshare.png",
          success: (res) => {
            console.log("转发成功", res);
          },
          fail: (res) => {
            console.log("转发失败", res);
          }
        }
      }
      else {
        console.log("来自右上角转发菜单")
        if(this.userId != null){
           return {
            title: '我获得了现金优惠券，你也快来领取吧！',
            path: `/pages/index/main?unionId=` + this.userId,
            imageUrl: "https://static.daoyintech.com/astshare.png",
            success: (res) => {
              console.log("转发成功", res);
            },
            fail: (res) => {
              console.log("转发失败", res);
            }
          }
        }else{
          return {
            title: '脑卫士',
            path: `/pages/index/main`,
            imageUrl: "",
            success: (res) => {
              console.log("转发成功", res);
            },
            fail: (res) => {
              console.log("转发失败", res);
            }
          }
        }
        
      }
      
    },
    computed:{
      ...mapGetters([
        'setCookie','currentProductCar'
      ]),
      comgoodslist(){
        return this.goodslist
      },
      comgoodslistother(){
        return this.goodslistother
      },
    },
    onLoad(options) { 
      this.getLocation();// 获取当前城市位置
      this.get_productTypes() //获取运动信息
      // this.getAreaShops(),//获取区域内场馆
      wx.showLoading({ //数据请求前loading，
        title: '加载中',
      })
      this.islogin()
      this.isLoading = false //不显示缺省页
      if(options.unionId){
        this.userCode = decodeURIComponent(options.unionId)//通过二维码进来获取的unionId
      }else{
        this.userCode = ''
      }
      this.isLoading = false //不显示缺省页
      this.page = 1
      this.goodslist = []
      this.goodslistother = []
      this.isBottom1 = false
      this.isBottom2 = false
      this.judgeShowClickId()
      this.getRule()
      this.backgroundAudioManager = wx.getBackgroundAudioManager()
      // this.getMusic()
    },
    onShow(){
      // this.backgroundAudioManager.onPlay((e) => {
      //    console.log("开始播放")
      //    this.musicStatus = true
      // })
      // this.backgroundAudioManager.onPause((e) => {
      //    console.log("播放暂停")
      //    this.musicStatus = false
      // })
      // this.backgroundAudioManager.onStop((e) => {
      //    console.log("播放停止")
      // })
      // this.backgroundAudioManager.onEnded((e) => {
      //    console.log("播放结束")
      //    this.musicStatus = false
      // })
      this.getcar()
      this.islogin()
    },
   
    onReachBottom () { //上拉加载
      if(this.selectId == 0){
        if(this.totalPage > this.page){
          wx.showLoading({ //数据请求前loading，
            title: '加载中',
          })
          this.page++
          this.isBottom1 = false
          this.indexRequestData()
        }else{
          if(this.comgoodslist.length == 0){  //没数据的时候
            this.isBottom1 = false
          }else{
            this.isBottom1 = true
          }
        }
      }else{
        if(this.totalPage > this.page){
          wx.showLoading({ //数据请求前loading，
            title: '加载中',
          })
          this.page++
          this.isBottom2 = false
          this.othersRequestData()
        }else{
          this.isBottom2 = true
        }
      }
    }, 
    //下拉刷新
    onPullDownRefresh(){
      wx.stopPullDownRefresh();//设置下拉弹回去
      // this.page = 1
      // this.goodslist = []
      // this.goodslistother = []
      // if(this.selectId == 0){
      //   this.indexRequestData()
      // }else{
      //   this.othersRequestData()
      // }
    },
    methods: {
      go_mapinfo(){
        wx.navigateTo({
        url:"/pages/map-details/main"
        })
      },

      sendInfo(id){//全部分类弹窗数据查询
        this.typeId = id;
        this.getAreaShops(id);
      },
      sendNearby(distanceType){ // 附近弹出层请求数据
        this.distanceType = distanceType;
        this.getAreaShops(distanceType);
      },
      sendIntellectType(intellectType){ // 附近弹出层请求数据
        this.intellectType = intellectType;
        this.getAreaShops(intellectType);
      },
      sendListinfo(type){ // 附近弹出层请求数据
      if (type == 1) {
        this.lowPrice = type
      }else if(type == 2){
        this.highPrice = type
      }
      console.log(' this.lowPrice', this.lowPrice,this.highPrice);
      // this.getAreaShops(this.lowPrice,this.highPrice);
      },
      // 首页地图页跳转方法
      go_mapDetails(){
          wx.navigateTo({
            url:"/pages/map-details/main"
          })
      },
      getLocation(){ // 获取当前的经纬度
        let that = this;
        wx.getLocation({
          type: 'wgs84',
           success (res) {
              that.latitude = res.latitude // 纬度
              that.longitude = res.longitude // 经度
              // 调用位置信息
              that.get_restapi()
              // 调用场馆区域内信息
              that.getAreaShops()
            }
          })
      },
      // 获取逆地理编码位置
      get_restapi(){
        let that = this;
        wx.request({
          url: `https://restapi.amap.com/v3/geocode/regeo`, 
          header: {
            "Content-Type": "application/json"
          },
          data: {
            key: 'fc89b02ed7936fed330f42979073d8d5',
            location: `${this.longitude},${this.latitude}`
          },
          success (res) {
            that.city = res.data.regeocode.addressComponent.city
            // console.log(res.data.regeocode.addressComponent.city)
          }
        })

      },
      //获取运动分类数据
      get_productTypes(){
        this.$http.get('/productTypes').then(res => {
          this.bannerList = res.data.data
        })
      },

      // 获取区域内场馆
      async getAreaShops(typeId,shopName,distanceType,intellectType,lowPrice,highPrice){
        console.log(lowPrice,'===========',highPrice);
        let that  = this;
        that.$http.get(`/mapShop/getAreaShops?areaName=${that.city}&latitude=${that.latitude}&longitude=${that.longitude}&typeId=${typeId||""}&shopName=${shopName|| ""}&distanceType=${distanceType || ''}&intellectType=${intellectType || ''}&lowPrice=${lowPrice || ''}&highPrice=${highPrice || ''}`).then(res => {
          if (res.data.data.length != 0 && res.data.data.length == 1 ) { // 检索只有一条数据
              that.arrLeft = []
              that.arrRight = []
              res.data.data.forEach( (item)=> { // 只有一条数据显示左边
                  that.arrLeft.push(item)
                  this.isShow = false
                  this.isShowKm = false
                  this.isShowZN = false
              })
          }else if (res.data.data.length != 0) {
              this.isShow = false
              this.isShowKm = false
              this.isShowZN = false
              res.data.data.forEach( (item, index)=> { // 有多条数据，分为左右两个数组
              if (index % 2) {
                that.arrLeft.push(item)
              } else {
                that.arrRight.push(item)
              }
              })
          } else if(res.data.data.length == 0){ // 没有数据
              that.arrLeft = []
              that.arrRight = []
              this.isShow = false
              this.isShowKm = false
              this.isShowZN = false
          }
        })
      },
      
      //判断用户是否是登录状态
      islogin(){
        let self = this
        self.$http.get('integral/my/integral','','',false).then((res)=>{ 
          if(res.data.code == 2){
            console.log('未登录')
          }else{
            self.isloginShareBtn = true
            self.userId = res.data.data.unionId
            console.log('已登录')
            console.log(self.userId)
          }
        })
      },
      //点击自定义分享按钮需要登录的状态
      shareLogin(){
        this.isNeedLogin = true
      },
      catchTouchMove(res){
        return false
      },
      stopMusic(){
        this.backgroundAudioManager.pause()
      },
      startMusic(){
        this.backgroundAudioManager.title = '背景音乐'
        this.backgroundAudioManager.src = this.musicUrl
        this.backgroundAudioManager.play()
      },
      getMusic(){
        let self = this
        self.$http.get('/getJsonTwo').then((ret)=>{ 
          self.musicUrl = ret.data.data.musicUrl
          self.startMusic()
        })
      },
      getRule(){
        let self = this
        self.$http.get('/getJson').then((ret)=>{ 
          self.ruleData = ret.data.data
        })
      },
      closeRuleData(){
        this.isShowRuleData = !this.isShowRuleData
      },
      close(){
        this.showhb = false
        wx.showTabBar()
      },
      logins(){
        console.log("登录了")
        this.islogin()
        if(this.userCode != ''){
          this.indexRequestData()
        }
      },
      //去附近商家或者分享海报
      go_shoppaper(id){
        let self = this
        if(id == 0){//附近商家
          wx.navigateTo({
            url:"/pages/near-shop/main"
          })
        }else{//分享海报
          // self.showToast("点击分享海报")
          self.$http.get(`/user/wx_mp_qr_code`).then((ret)=>{
            if(ret.data.code == 0){
              console.log(ret.data.data)
              wx.hideTabBar()
              self.showhb = true
              self.hbIcon = ret.data.data

            }else{
              self.isNeedLogin = true
            }
            
          })
        }
      },
      
      aaa(e,c) {
        // var id = e.currentTarget.id;
        var id = e.mp.detail.current;
        c.map((item,index)=>{
          if(item.isVideo == true){
            wx.createVideoContext(id+"").play();
          }else{
              wx.createVideoContext(id+"").pause();
          }
        })
      },
      // complete(){
      //   this.isLoading = false //不显示缺省页
      //   this.ifLogin = false;//不需要登录了
      //   this.judgeShowClickId()
      // },
      clickId(val){
        this.isBottom1 = false
        this.isBottom2 = false
        this.selectId = val
        if(val == 0){
          this.page = 1
          this.goodslist = []
          this.goodslistother = []
          this.indexRequestData()
        }else{
          this.page = 1
          this.goodslist = []
          this.goodslistother = []
          this.othersRequestData()
          this.othersBannerData()
        }
      },
      judgeShowClickId(){
        this.goodslistother = []
        this.goodslist = []
        if(this.selectId == 0){
          console.log("开始挂级")
          this.guaji()
         
        }else{
          this.othersRequestData()
          this.othersBannerData()
        }
      },
      //需要进行挂级的判断
      guaji(){
        this.$http.get('integral/my/integral','','',false).then((res)=>{ 
          console.log("用户状态" + JSON.stringify(res.data.code))
          if(this.userCode != ''){//通过扫码进入需要挂级
            if(res.data.code === 2){
              this.isNeedLogin = true
              console.log("需要登录")
            }else{
              this.indexRequestData()
              console.log("不需要登录")
            }
          }else{
            this.indexRequestData()
          }
          
        })
        
      },
      indexRequestData(){//首页分类的数据
        this.$http.get(`new/welcome?page=${this.page}&parentUnionId=${this.userCode}`,'','',false).then((res)=>{ 
          wx.setStorageSync('selectIdNum',10000)
          wx.setStorageSync('parentId',this.userCode)
         if(this.page === 1){//因为是分页，所以这个page不为1的时候，只是加载的有商品详情
            if(res.data.code === 0){
              this.userCode = "" //挂级的二维码参数
              this.ifLogin = false //能正常获取到数据，授权弹框消失
              this.tablist = res.data.data.productTypes //tab栏
              this.bannerImglist = res.data.data.banners //轮播图
              this.activeImglist = res.data.data.activityBanners //活动商品
              this.goodslist = this.goodslist.concat(res.data.data.products)  //商品详情
              this.isShowIntro = true; //是否显示搜索按钮
              if(this.goodslist.length>0){
	              this.isShowShopIntro = true //是否显示商品推荐几个字
	            } 
              this.totalPage = res.data.data.totalPage //总页数
              wx.hideLoading() //数据请求前loading，
            }else if(res.data.code === 3){
              this.ifLogin = true //不能正常获取到数据，授权弹框出现
            }
          }else{
            if(res.data.code === 0){
              this.userCode = "" //挂级的二维码参数
              this.ifLogin = false //能正常获取到数据，授权弹框消失
              this.goodslist = this.goodslist.concat(res.data.data.products)  //商品详情
              wx.hideLoading() //数据请求前loading，
            }else if(res.data.code === 3){
              this.ifLogin = true //不能正常获取到数据，授权弹框出现
            }
          }
          this.isLoading = false //显示缺省页
        })
      },
      othersRequestData(){//除开首页外其它分类的内容
        this.$http.get(`products/new/category/${this.selectId}?page=${this.page}`,'','',false).then((res)=>{
          wx.setStorageSync('selectIdNum',this.selectId)
          console.log(this.page)
          console.log('该ID的商品数量',res)
          this.goodslistother = this.goodslistother.concat(res.data.data.responses) //商品详情
          console.log('商品详情',this.goodslistother)
          this.bannerImglist = '' //轮播的图片没有了
          this.activeImglist = '' //活动页的图片没有了
          // this.isShowShopIntro = false //是否显示商品推荐几个字
          
          this.isShowIntro = true //是否显示搜索按钮
          this.totalPage = res.data.data.totalPage //总页数
          this.userCode = "" //挂级的二维码参数
          this.isLoading = true //显示缺省页
          wx.hideLoading() //数据请求前loading
        })
      },
      othersBannerData(){
        this.$http.get(`products/categoryBanner/${this.selectId}`).then((res)=>{
          console.log("其他页面的banner图片",res.data.data)
          this.bannerImglist1 = res.data.data
          console.log('这个分类页面的banner',this.bannerImglist1)
          if( this.bannerImglist1.length > 0) {
            this.isShowShopIntro = true
          }else {
            this.isShowShopIntro = false
          }
        })
      },
      getcar(){ //进入页面就调取购物车 初始化
        this.$http.get('cart','','',false).then((res)=>{ 
          this.$store.dispatch("createLineItem",res.data.data)
        }).catch((err)=>{
          console.log('购物车的错误',err)
        })
      },
      toLink(path){
        const url = path;
        wx.navigateTo({ url })
      },
      //跳转到活动页or商品详情页
      bannerImgTO(link){
        this.$http.get(`products?link=${link}`).then((res)=>{ 
          console.log('商品得到的数据',res.data.data)
            if(res.data.data){
              const url = '/pages/goods-indetail/main?aid=' + res.data.data.productId;
              wx.navigateTo({ url })  
            }else{
              this.wxAlert(res.data.msg)
            }
        })
      },
      //保存图片
      saveImage(){  //这是下载图片并且保存图片到系统相册
        let self = this
        wx.downloadFile({ //下载文件
          url: self.hbIcon,  
          success: function (res) {     
            let path = res.tempFilePath
            wx.saveImageToPhotosAlbum({  // 保存图片到系统相册   
              filePath: path,  
              success(res) {  
                console.log(res) 
                self.showToast("保存成功")  
              },  
              fail(err) {
                // self.showToast("下载文件：fail")  
              },  
            })  
          },  
          fail (res) {  
            self.showToast("下载文件：fail")  
            console.log(res);  
          }  
        })  
      }, 

      showToast (title) {
        wx.showToast({
          title: title,
          duration: 2000,
        });
      },
    },
    // computed: {
    //   itemWidth() {
    //     return (334 * 0.5 * (document.documentElement.clientWidth / 375)) 
    //   },
    //   gutterWidth(){
    //     return (36 * 0.5 * (document.documentElement.clientWidth / 375)) 
    //   }
    // },
  }
</script>

<style scoped >

.motion_box{
  width: 750rpx;background-color: #fff;
} 
.motion_box .search{
    width: 750rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    margin-bottom: 18rpx;
  }
  .city{
    
    margin-left: 32rpx;
    width: 152rpx;
    height: 60rpx;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    text-align: center;
    line-height: 60rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #000000;
    border-radius: 30rpx;
  }
  .motion_box .search .button{
    display: flex;
    align-items: center;
    width: 503rpx;
    height: 60rpx;
    background: #EEEEEE;
    box-shadow: 0px 3rpx 16rpx 2rpx rgba(255, 255, 255, 0.14);
    opacity: 0.9;
    border-radius: 30rpx;
    font-size: 30rpx;
    line-height: 60rpx;
    padding-left: 28rpx;
  }
  .img_box{
    width: 54rpx;
    height: 54rpx;
    background-image: url('../../../static/images/index/mapimg.png');
    background-size: cover;
    background-repeat: no-repeat;
    margin-left: 9rpx;
    margin-right: 6rpx;
  }

  .banner_box{
    width: 750rpx;
    height: 341rpx;
    padding: 10rpx 41rpx 30rpx 43rpx;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .banner_box_child{
    width: 25%;
    text-align: center;
    align-items: center;
  }
  .banner_box_text{
    margin-bottom: 24rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #000000;
  }

  .search_box{
    width: 750rpx;
    height: 80rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 25rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #626262;
  }
  .search_box div{
    display: flex;
    align-items: center;
    border-right: 1px solid #E5E5E5;
  }
  .waterfall_box{
    width: 750rpx;
    min-height: 300rpx;
    display: flex;
    flex-wrap: wrap;
    padding: 0 16rpx;
   
  }
  .waterfall_box .left{
    width: 350rpx;
    min-height: 484rpx;
    margin-right: 16rpx;
    background-color: #fff;
    border-radius: 25rpx;
  }
  .waterfall_box .left div:nth-child(1){
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #010101;
  }
   .waterfall_box .left .text1{
     
     display: flex;
     align-items: center;
     font-size: 24rpx;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #908D8D;
  }
    .waterfall_box .left .text1 .overhed{
    display: inline-block;
    width:270rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .waterfall_box .left .text2 span:nth-child(1){
    font-size: 20rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #0EC173;
    display: inline-block;
    padding-right: 10rpx;
    border-right: 1px solid #908D8D;
  }
  .waterfall_box .left .text2 .c908{
    font-size: 20rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #908D8D;
    padding-left: 20rpx;
  }

    .waterfall_box .left .text3{
      font-size: 36rpx;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #FE720C;
    }
    .waterfall_box .left .text3 span{
      font-size: 20rpx;
      font-weight: 500;
    }
    .waterfall_box .right{
    width: 350rpx;
    min-height: 484rpx;
    background-color: #fff;
    border-radius: 25rpx;
  }
    .waterfall_box .right div:nth-child(1){
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #010101;
    
  }
   .waterfall_box .right .text1{
     display: flex;
     align-items: center;
     font-size: 24rpx;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #908D8D;
  }
  .waterfall_box .right .text1 .overhed{
    display: inline-block;
    width:270rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .waterfall_box .right .text2 span:nth-child(1){
    font-size: 20rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #0EC173;
    display: inline-block;
    padding-right: 10rpx;
    border-right: 1px solid #908D8D;
  }
  .waterfall_box .right .text2 .c908{
    font-size: 20rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #908D8D;
    padding-left: 20rpx;
  }

    .waterfall_box .right .text3{
      font-size: 36rpx;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #FE720C;
    }
    .waterfall_box .right .text3 span{
      font-size: 20rpx;
      font-weight: 500;
    }

    .waterfall_box .nullArr{
      width: 750rpx;
      height: 100rpx;
      font-size: 22rpx;
      color: #E5E5E5;
      text-align: center;
      line-height: 100rpx;
      border-bottom: 1px solid #E5E5E5;
    }


@keyframes kf-marque-animation{ 0% { transform: translateX(0); } 100% { transform: translateX(-50%); }}
.marquee{
    width: 100%;
    height: 500rpx;
    background: #fff;
    border: none;
    display: block;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    position: relative;
}
.marquee .content{
    display: inline-block;
    position: relative;
    padding-right: 0px;
    animation: kf-marque-animation 20s linear infinite;
    white-space: nowrap;
}


.marquee_content_one_icon{
  width: 750rpx;
  height: 500rpx;
}

.turn{
  position: fixed;
  left: 30rpx;
  width:76rpx;
  height: 76rpx;
  animation:turn 4s linear infinite;     
  z-index: 100; 
}

@keyframes turn{
  0%{-webkit-transform:rotate(0deg);}
  25%{-webkit-transform:rotate(90deg);}
  50%{-webkit-transform:rotate(180deg);}
  75%{-webkit-transform:rotate(270deg);}
  100%{-webkit-transform:rotate(360deg);}
}
.stop_turn{
  position: fixed;
  left: 30rpx;
  width:76rpx;
  height: 76rpx;
  z-index: 100; 
}
.music_icon{
  width: 100%;
  height: 100%;
}

.firstEnter{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 102; 
  background: #000;
  opacity: 0.6;
}
.firstEnter .step1{
  position: absolute;
  top: 300rpx;
  left: 270rpx;
  width: 359rpx;
  height: 392rpx;
}
.firstEnter .step2{
  position: absolute;
  top: 1260rpx;
  left: 0;
  width: 100%;
  height: 301rpx;
}
.firstEnter .step2 img{
  width: 322rpx;
  height: 301rpx;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.tabDiv{
  background: #efeff4;
  /* width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0; */
}
img{
  width: 100%;
  height: 100%;
  display: block;
}
.updateInfo{
  position: fixed;
  top: 0;
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 30rpx;
  color: #fff;
  z-index: 100; 
}
.updateInfo .updateInfoBg{
  width: auto;
  height: 100%;
  background: #e1c7d2; 
  opacity: 0.9;
}
.updateInfo .swiperDiv{
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 110; 
}
.updateInfo .swiperDiv swiper{
  padding: 0 30rpx;
  height: 88rpx!important;
}
.tabAll{
  width: 100%;
  height: 88rpx;
  position: fixed;
  top: 0; 
  z-index: 99;
  background: #fafafa;
  display: flex;
}
.recommend{
  font-size: 28rpx;  
  margin: 0 10rpx 0 30rpx;
  line-height: 88rpx;
}
.recommend.active{
  color:#b1b1b1;
}
.tabContent{
  height: 88rpx;
  flex: 1;
  overflow-x: auto;
  position: relative;
}
.myTabUl{
  font-size: 30rpx;
  height: 88rpx;
  display: flex;
  justify-content: space-around;
  align-items: center
}
.tabAll .searchDiv{
  width: 80rpx;
  height: 88rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fafafa;
  color: #b1b1b1;
  font-size: 28rpx;
  margin-right: 25rpx;
}
.otherTxt{
  padding: 30rpx;
  background: #fafafa;
}
.imglist{
  width: 100%;
  overflow: hidden;
  background: #efeff4;
  position: relative;
  top: 88rpx;
}
.imglist .imgIntro{
  width: 100%;
}
.imglist .imgIntro swiper{
  width: 100%;
  height: 500rpx;
}
.imglist .imgIntro swiper swiper-item image{
  width: 100%;
  height: 100%;
}
.imglist .seprateShop{
  width: 100%;
  height: 150rpx;
  background: #fff;
  overflow: hidden;
}
.imglist .seprateShop p{
  width: 40rpx;
  height: 2rpx;
  background: #000;
  margin: 50rpx auto 20rpx;
}
.imglist .seprateShop div{
  text-align: center;
  font-size: 32rpx;
  color: #000;
}
.integralBtn{
  height: 100rpx;
  width: 100rpx;
  background: #000;
  opacity: 0.75;
  border-radius: 100%;
  font-size: 24rpx;
  color: #f37e7e;
  text-align: center;
  position: fixed;
  bottom: 50rpx;
  right: 30rpx;
  z-index: 101;
}
.integralBtn .rewardpoolDiv {
  width: 40rpx;
  height: 38rpx;
  margin: 13rpx auto 3rpx;
}
.integralBtn .rewardpoolDiv img{
  width: 100%;
  height: 100%;
}
.imgwall{
  bottom: 180rpx;
}
.imgwall .rewardpoolDiv {
  margin: 10rpx auto 3rpx;
}
.lackShopPage{
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #efeff4;
}
.lackShopPage .lackShopTxt div{
  width: 140rpx;
  height: 156rpx;
  margin: 0 auto;
}
.lackShopPage .lackShopTxt div img{
  width: 100%;
  height: 100%;  
}
.lackShopPage .lackShopTxt p{
  text-align: center;
  font-size: 30rpx;
  color: #adadad;
  margin-top: 25rpx;
}
.bottomDiv{
  background: #fff;
  width: 100%;
  font-size: 26rpx;
  color: #a09f9f;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 90rpx;
  padding: 10rpx 0;
  position: relative;
}
.bottomDiv>img{
  width: 34rpx;
  height: 34rpx;
  margin-right: 10rpx;
}
.bottomDivimg{
  background: #fff;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 90rpx;
  padding: 10rpx 0;
  position: relative;
}
.bottomDivimg>img{
  width: 50rpx;
  height: 50rpx;
}

.shop_paper{
  display: flex;
  align-content: center;
  justify-content: space-around;
  height: 110rpx;
  background-color: #fff;
  margin-bottom: 10rpx
}
.shop_paper_one{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center
}
.shop_paper_one_icon{
  width: 72rpx;
  height: 72rpx;
}
.shop_paper_one_name{
  font-size: 30rpx;
  color: #000;
  margin-left: 15rpx
}

.twoDCode{
  width: 200rpx;
  height: 200rpx;
}

.hb{
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.67)
}
.hb_icon{
  width: 530rpx;
  height: 800rpx;
}
.hb_btn{
  width:530rpx;
  height:80rpx;
  background:rgba(166,142,105,1);
  text-align: center;
  line-height: 80rpx;
  font-size: 30rpx;
  color: #F1E6DB;
  margin-top: 30rpx
}

.rule_all{
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 110;
  background-color: rgba(0, 0, 0, 0.67)
}

.rule_all_content{
  position: relative;
  width: 626rpx;
  height: 649rpx;
}
.rule_all_content_bgicon{
  width: 100%;
  height: 100%;
}
.rule_all_content_info{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 115rpx 0 0 0
}
.rule_all_content_info_scroll{
  height: 480rpx;
}
.scroll_{
  padding: 0 60rpx 0 33rpx
}
.rule_one{
  display: flex;
  margin-bottom: 22rpx;
}
.rule_one_index{
  width: 50rpx;
}
.rule_one_index_{
  width: 32rpx;
  height: 32rpx;
  background-color: #AE7E29;
  line-height: 32rpx;
  text-align: center;
  border-radius: 50%;
  font-size: 24rpx;
  color: #fff
}
.rule_one_word{
  font-size: 24rpx;
  color: #666666;
  text-align: justify;
  line-height: 40rpx;
  width: 490rpx
}



.share_all_tc{
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.67);
    z-index: 100;
}

.share_all_tc_content{
  position: relative;
}
.share_tc_icon{
  width: 580rpx;
  height: 650rpx;
}
.share_btn{
  position: absolute;
  width: 390rpx;
  height: 80rpx;
  bottom: 60rpx;
  left: 96rpx;
  background: linear-gradient(0deg, #C9A26A 0%, #F8D9AB 100%);
  box-shadow: 0rpx 11rpx 21rpx 0rpx rgba(216, 174, 116, 0.63);
  border-radius: 28rpx;
  font-size: 39rpx;
  line-height: 80rpx;
  font-weight: bold;
  letter-spacing:8rpx;
  color: #754C10;
}


.share_icon{
  position: fixed;
  right: 30rpx;
  width:126rpx;
  height: 147rpx;
  z-index: 90; 
}

.allCategory{
  position: fixed;
  z-index: 999;
  top: 0;
  width: 750rpx;
  height: 500rpx;
  background-color:#fff;
}
.allCategoryInfo{
  padding-left: 20rpx;
  height: 60rpx;
  line-height: 60rpx;
  width: 100%;
  color: #626262;
  border-bottom:1px solid #E5E5E5 ;
  font-size: 24rpx;
  font-weight: 500;
}
/* .modle{
  z-index: 99999;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
} */
</style>
